<template>
  <div class="video-panel">
    <template v-if="!formData.advancedConfig?.delete">
      <el-form v-model="formData" label-position="top">
        <el-form-item label="音量">
          <el-input-number
            v-model="formData.advancedConfig.volume"
            class="property-input"
            @focus="handleFocus"
            :min="0"
            :max="100"
          >
          </el-input-number>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <el-empty description="请选择组件" :image-size="80" />
    </template>
  </div>
</template>
<script setup>
let formData = defineModel()

let handleFocus = () => {
  formData.value.active = true
}
</script>
<style scoped lang="scss">
.video-panel {
  .property-input {
    width: 190px;
    margin-top: 6px;
  }
}
.video-list {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 0px 1px 5px 0px rgba(0, 21, 41, 0.1);
  padding: 12px;
  box-sizing: border-box;
  border-radius: 6px;
  &-right {
    cursor: pointer;
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-content {
    display: flex;

    flex-direction: column;
    row-gap: 10px;
    margin-top: 10px;
  }
  &-input {
    width: 120px;
  }
}
.w-140 {
  width: 140px;
}
</style>
